<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>加载指示器</title>
		<style>
			/* 加载指示器的样式 */
			#loadingIndicator {
				position: fixed;
				/* 固定在页面中央 */
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.5);
				/* 半透明背景 */
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 1000;
				/* 保证在页面其他内容上方 */
			}

			/* 加载指示器的动画效果 */
			#loadingIndicator::before {
				content: "";
				width: 40px;
				height: 40px;
				border: 5px solid #fff;
				/* 白色边框 */
				border-top-color: #4caf50;
				/* 顶部为绿色 */
				border-radius: 50%;
				/* 圆形 */
				animation: spin 1s linear infinite;
				/* 旋转动画 */
			}

			/* 旋转动画的关键帧 */
			@keyframes spin {
				from {
					transform: rotate(0deg);
				}

				to {
					transform: rotate(360deg);
				}
			}

			/* 页面内容的样式 */
			#content {
				display: none;
				/* 初始隐藏内容 */
				text-align: center;
				margin-top: 50px;
				font-family: Arial, sans-serif;
			}
		</style>
	</head>
	<body>
		<!-- 在页面加载过程中显示加载动画，直到页面完全加载。 -->
		<!-- 加载指示器 -->
		<div id="loadingIndicator"></div>
		<!-- 页面内容 -->
		<div id="content">
			<h1>Welcome to the Page</h1>
			<p>This content is displayed after the page has fully loaded.</p>
		</div>
		<script>
			//监听页面加载完毕事件
			window.addEventListener('load',function(){
				setTimeout(function(){
					//获取指示器元素
					const loadingIndicator = document.getElementById('loadingIndicator')
					//隐藏加指示器
					loadingIndicator.style.display = 'none'
					//显示页面内容
					const content = document.getElementById('content')
					content.style.display = 'block'
				},2000)
			})
		</script>
	</body>
</html>